import React, { useEffect, useState } from "react";
import MyHeader from "../../components/myHeader";
import { Layout, message as antdMessage } from "antd";
import { useParams } from "react-router-dom";
import axios from "axios";
import { ListRawState } from "../../types";
import "./style.css";
const { Header, Content, Footer } = Layout;

const Detail: React.FC = () => {
  const [v, setV] = useState<ListRawState>({} as ListRawState);
  // 1. 获取动态路由id
  const { id } = useParams();
  // 2. 请求数据
  const fetchDetail = async () => {
    const resp = await axios.get("/api/detail", { params: { id } });
    const { code, data, message } = resp.data;
    if (code === 200) {
      setV(data);
    } else {
      antdMessage.error(message);
    }
  };
  // 3 副作用
  useEffect(() => {
    fetchDetail();
  }, []);

  return (
    <Layout style={{ minHeight: "100vh" }}>
      <Header>
        <MyHeader></MyHeader>
      </Header>
      <Layout>
        <Content>
          <div className="con" style={{ width: 1000, margin: "auto" }}>
            <div className="con-title">
              <div>ID： {v.id}</div>
              <div>标题： {v.title}</div>
              <div>总价： {v.price}</div>
              <div>电话： {v.tel}</div>
              <div>地址： {v.address}</div>
              <div dangerouslySetInnerHTML={{ __html: v.content }}></div>
            </div>
          </div>
        </Content>
        <Footer style={{ textAlign: "center" }}>
          北京八维信息集团 软件事业部 2017-09 联系电话：010-82157093
          北京八维博大科技有限公司 版权所有 © 2017-2025 京ICP16046047号-2
        </Footer>
      </Layout>
    </Layout>
  );
};

export default Detail;
